<template>
    <div class="page">
        <el-tabs v-model="activeName">
            <el-tab-pane label="框架介绍" name="fourth">
                <h2>介绍</h2>
                <p>本框架基于elementui搭建，实现了基础布局页面，内容部分需要集合elementui官方组件进行组合，建议熟悉官方的各种常用组件，本框架提供了几个Demo页面，建议你参照按照
                    <el-tag effect="plain" type="info">内容管理</el-tag>
                    和
                    <el-tag effect="plain" type="info">用户管理</el-tag>
                    里面预定义的页面进行扩展。
                </p>
                <h2>表单</h2>
                <h3>1、表单布局</h3>
                <p>
                    内容少的表单建议使用弹窗编辑，参照
                    <el-tag effect="plain" type="info">内容管理 > 分类管理 > 添加\修改分类</el-tag>
                    ；内容多的使用新标签页编辑，参照
                    <el-tag effect="plain" type="info">内容管理 > 文章管理 > 添加\修改文章</el-tag>
                </p>
                <h3>2、表单验证</h3>
                <p>
                    element ui官方有一套验证规则，具体看官方案例，但这套方案还是有点麻烦。本项目引入了一个第三方验证插件：
                    <el-tag effect="plain" type="info">element-ui-verify</el-tag>
                    ，<a href="https://aweiu.com/documents/element-ui-verify/" target="_blank">文档地址</a>，该框架与element
                    ui官方验证可以共用。
                </p>
                <p>elementui官方验证要针对表单写一个json对象来验证，虽然也可以在 el-form-item 上写验证，不过还是没有 element-ui-verify 的方式简洁。</p>
                <p>
                    <img src="../../../assets/images/demos/verify.jpg" alt="" />
                </p>
                <h2>Mockjs模拟数据</h2>
                <p>
                    本框架已引入 mockjs ，用于模拟后端返回数据，自动拦截http请求，根据规则返回需要的数据，详见：
                    <el-tag effect="plain" type="info">/scripts/apis/mock.js</el-tag>
                    ，<a href="https://github.com/nuysoft/Mock/wiki/Getting-Started" target="_blank">文档在这里</a>。
                </p>
                <h2>图表</h2>
                <p>已引入 echarts和v-charts，具体demo点这里：<a href="https://v-charts.js.org/#/" target="_blank">v-charts</a></p>

                <h2>编辑器</h2>
                <p>已引入UEditor编辑器，具体查看
                    <el-tag effect="plain" type="info">内容管理 - 添加文章</el-tag>
                </p>

            </el-tab-pane>
            <el-tab-pane label="项目建构及说明" name="first">

                <el-row :gutter="20">
                    <el-col :span="12">
                        <p>
                            <img src="../../../assets/images/demos/project.jpg" alt="" />
                        </p>
                    </el-col>
                    <el-col :span="12">
                        <p>
                            关于自定义环境变量的说明，在 <el-tag effect="plain" type="info">项目说明</el-tag> 里面。
                        </p>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="登录/权限/菜单" name="second">
                <h2>后台登录地址</h2>
                <p>默认后台登录地址：/login</p>
                <h2>登录信息存储</h2>
                <p>
                    login页面只负责登录获取token，通过浏览器跳转到后台首页才获取登录信息进行存储，如果登录失效会清除token返回登录页面。设计之初是想在登录页面获取登录信息后通过路由跳转（网页不会刷新）到后台首页，但这种方式偶尔会出现菜单不能根据权限动态显示，所以直接通过浏览器跳转方式进入后台首页，这也符合专业人士的使用习惯，不会先进入登录页面，而是直接进入后台首页，
                    需要登录时再自动跳转到登录页面。</p>
                <p>登录信息获取并存储，以及登录验证都在layout.vue（后台公共布局文件）里面的
                    <el-tag effect="plain" type="info">setLoginInfo()</el-tag>
                    方法中。
                </p>
                <div class="card">
                    <pre>
<code>this.$store.dispatch('setAdmin', {
    id: r.result.user.id, // 用户id
    userName: r.result.user.userName, //用户名
    name: r.result.user.name, // 姓名昵称
    permissions: r.result.permissions || [], //权限集合，是一个字符串数组，如['article.delete','usermanage']
})</code>
                    </pre>
                </div>
                <h2>菜单权限</h2>
                <p>在
                    <el-tag effect="plain" type="info">/scripts/navs.js</el-tag>
                    里面定义菜单，每个菜单项设置
                    <el-tag effect="plain" type="info">permission</el-tag>
                    属性，填入该菜单需要的权限，系统会根据登录用户的权限自动显示相应的菜单
                </p>
                <h2>按钮或内容 权限</h2>
                <p>
                    在
                    <el-tag effect="plain" type="info">/scripts/mixins.js</el-tag>
                    里面定义得有一个公共方法：
                    <el-tag effect="plain" type="info">hasPermission()</el-tag>
                    ，可以根据权限决定一个按钮是否显示：
                    <el-tag effect="plain" type="info">v-if="hasPermission('article.delete')"</el-tag>
                    ，也可用于if判断：
                    <el-tag effect="plain" type="info">if(hasPermission('article.delete')){ dosomthing }</el-tag>
                </p>

                <p>s</p>
                <el-tag effect="plain" type="info">aaaaaaa</el-tag>

            </el-tab-pane>
            <el-tab-pane label="弹窗组件及传值" name="third">
                <p>组件之间传值网上用得最多的是用 props （详见vue相关文档）, 但在我的实践中，用得比较多的是自定义模态框组件，模态框就涉及到显示和隐藏以及互相传值。</p>
                <p>比如某列表页面，点某个操作按钮，需要弹出一个模态框进行操作，而这个模态框在很多列表页面都会用到，此时就需要将该模态框设计成组件，demo 参考 <el-tag effect="plain" type="info">内容管理 > 文章管理 > 调用自定义组件</el-tag> ，该Demo用到了父组件调用子组件并向子组件传值，子组件处理完成通知父组件，触发父组件事件，向父组件传值。</p>
                <p>
                    props 传值方式主要用于父组件值改变时，子组件自动跟随改变，无需手动去传值。
                </p>
            </el-tab-pane>
            <el-tab-pane label="如何快速上手" name="doit">
                <p>
                    1、先看下前面几个Tab的说明文档。
                </p>
                <p>
                    2、进入scripts > apis里面，参照article.js和user.js，写你的api接口文件，建议一个版块的接口写到一个文件，小项目全部写到一个文件也行。将你的接口文件集中到index.js里面，这里面的配置信息会在 main.js里面统一引用，并挂载的vue实例上，最终你可以通过 this.$apis.article.xxx访问接口。
                </p>
                <p>3、写好你的登录、退出接口，进入login.vue里面，把注释的登录功能放出来，改成你的登录接口。</p>
                <p>4、进入layout.vue，在 created() 方法里面你，取消 this.setLoginInfo() 的注释，并进入 setLoginInfo 方法里面，修改你的获取用户登录信息接口，以及登录地址，根据你的接口返回的数据，存储好用户登录信息包括权限，你不需要权限验证的话，权限设置为[] 空数组即可。</p>
                <p>5、进入navs.js里面，配置好你的菜单，如果你不需要权限验证，菜单上permission留空，或null，或者不写permission属性都行，菜单上不要求权限，则菜单会直接显示出来。</p>
                <p>6、在views里面建立你的页面，配置好你的路由规则和导航菜单，就可以撸业务了。</p>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    let pagerHeader = {
        title: '使用说明',
        desc: '使用说明',
        breadcrumb: ['系统', '使用说明']
    }
    export default {
        name: "help.vue",
        data() {
            return {
                activeName: 'doit',
            }
        },
        activated() {
            this.init()
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.setPageHead(null);
            },
            test(){
                this.$store.dispatch('setTest')
                //this.$store.commit('setTest')
            }
        }
    }
</script>

<style scoped>
    a {
        color: #6ab2ff;
    }

    .card {
        box-shadow: 0px 0px 5px #ccc;
        margin: 0 5px;
        padding: 10px 20px;
    }
</style>
